<template>
    <div class="loading-view" :style="{ backgroundImage:`url(${$imageSrcFormatter('01Loading页/背景.png')})` }">
        <ProgressBar :progress="progress"></ProgressBar>
    </div>
</template>

<script>
import ProgressBar from '@/components/ProgressBar/index.vue';

export default {
    name: 'LoadingView',
    components: {
        ProgressBar,
    },
    computed: {
        progress() {
            const { loadedCount, resourcesCount } = this.$store.state.RES;
            return Math.ceil(loadedCount / resourcesCount * 100);
        },
    },
    watch: {
        progress: {
            handler(val) {
                if (val >= 100) {
                    this.handleLoadingSuccess();
                }
            },
            immediate: true,
        },
    },
    mounted() {
        this.$store.dispatch('RES/handlePreload');
    },
    methods: {
        handleLoadingSuccess() {
            this.$router.replace({ name: 'Home' }).catch(err => {
                console.log(err);
            });
        },
    },
};
</script>

<style lang="scss" scoped>
.loading-view {
    @include mmv-view-backage;
    display: flex;
    align-items: center;
    justify-content: center;
    .loading-over-btn {
        position: absolute;
        top: 140vw;
    }
}
</style>
